<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>task9</title>
	<style type="text/css">
		@media screen and (min-width: 640px){
		.container{
			padding: 20px;
			display: flex;
			flex-flow:row wrap;
			align-items: center;
			justify-content: space-between;
		}
		}/*大于640px时*/
		[class*='item']{
			width: 150px;
			border:1px solid #f00;
		}
		.item1{
			height: 120px;
		}
		.item2{
			height: 100px;
		}
		.item3{
			height: 40px;
		}
		.item4{
			height: 200px;
			border-color: #0f0;
		}
		
		@media screen and (max-width: 640px){
			.container{
				padding: 20px;
				display: flex;
				flex-flow: row wrap;
				align-items: flex-start;
				justify-content: space-between;
			}
			.item4{
				order: -1;
				margin-bottom: 20px;
			}
			.item1{
				order: 0;
			}
			.item2{
				order: 0;
			}
			.item3{
				order: 1;
			}
		}

	</style>
</head>
<body>
	<div class="container">
		<div class="item1"></div>
		<div class="item2"></div>
		<div class="item3"></div>
		<div class="item4"></div>
	</div>

</body>
</html>